<template>
  <div class="main">
    <section>
      <!--选择日期-->
      <div class="filter-container">
        <el-tag>{{this.$route.params.time}}</el-tag>
        <el-select v-model="listQuery.isDiff" placeholder="请选择" size="small">
          <el-option
            v-for="item in type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="search" icon="el-icon-search" size="small">搜索</el-button>
        <br/>
        <span style=" font-size: 12px; color: red">注： 红色为不匹配记录</span>
      </div>

      <!--历史记录-->
      <el-table
        class="conciliation"
        max-height="700"
        :data="list"
        border
        v-loading="listLoading" element-loading-text="给我一点时间"
        :row-class-name="tableRowClassName"
        header-row-class-name="table-header"
        style="width: 100%; margin-bottom: 50px">
        <el-table-column
          prop="transactionTime"
          width="120"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          width="160"
          label="商户订单号">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          label="订单金额">
        </el-table-column>
        <el-table-column
          prop="channelOrderNo"
          width="160"
          label="渠道平台订单号">
        </el-table-column>
        <el-table-column
          prop="channelTotalPrice"
          width="100"
          label="渠道平台金额">
        </el-table-column>
        <el-table-column
          prop="channel"
          label="渠道平台标识">
          <!--<template slot-scope="scope">-->
            <!--{{ levels[scope.row.role] }}-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          prop="type"
          label="业务类型">
          <!--<template slot-scope="scope">-->
            <!--{{ levels[scope.row.orderRole] }}-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
        </el-table-column>
        <el-table-column
          prop="diffPrice"
          width="160"
          label="差异金额">
        </el-table-column>
        <el-table-column
          prop="checkResult"
          width="160"
          label="核对结果">
        </el-table-column>
        <el-table-column
          prop="businessNo"
          label="商户号">
        </el-table-column>
        <el-table-column
          prop="refundNo"
          min-width="300"
          label="商户退款号">
        </el-table-column>
        <el-table-column
          prop="channelRefundNo"
          min-width="160"
          label="渠道退款号">
        </el-table-column>
        <el-table-column
          prop="serviceCharge"
          label="服务费">
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" v-if="rightsButtons['detail']">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderNo" @click="goDetail(scope.row.orderNo)" type="primary" size="small">查看</el-button>
            <!-- <router-link :to="{path: '/order/detail', query: {id: scope.row.orderId ,type: scope.row.type}}">
              <el-button type="primary" size="mini">查看</el-button>
            </router-link> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination @current-change="initHistory" :current-page.sync="listQuery.page" :page-size="listQuery.pageSize" :total="total"></el-pagination>
      </div>
    </section>
  </div>
</template>

<script>

  import { getDetailList, getOrderInfo } from '@/api/reconciliation'

  export default {
    name: "conciliationList",
    data() {
      return {
        total: 0,
        value: '',
        fileTitle: '',
        list: [],
        type: [
          {value:0, label:'全部记录'},
          {value:1, label:'匹配记录'},
          {value:2, label:'不匹配记录'}
          ],
        listQuery: {
          page: 1,
          pageSize: 20,
          isDiff: 0,
          statisticsNo: this.$route.params.statisticsNo
        },
        // 会员等级
        levels: {
          '0': '普通用户',
          '1': '兰蜜',
          '2': '大区',
          '3': '董事',
        },
        timeLimit: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        current: 0,
        dialogFormVisible: false,
        listLoading: false,
        loading: false,
      }
    },
    created() {
      this.initHistory()
    },
    methods: {
      tableRowClassName({row}) {
        if (row.isDiff === 2) {
          return 'red';
        }
      },

      // 历史记录排序
      sortHistory(arr) {
        arr.sort(function (a, b) {
          if(a.time>b.time){
            return -1
          }else if ( a.time<b.time){
            return 1
          }
        })
        return arr
      },

      // 获取今年时间
      getYear() {
        let date = new Date;
        let year = date.getFullYear().toString();
        return year;
      },

      // 获取历史数据
      initHistory() {
        this.listLoading = true
        getDetailList(this.listQuery).then(res => {
          this.total = res.total
          let arr = res.data
          this.list = arr
          this.listLoading = false
        }).catch(err => {
          this.listLoading = false
        })
      },
      // 搜索事件
      search() {
        this.listQuery.page = 1
        this.initHistory()
      },
      goDetail(orderNo) {
        getOrderInfo(orderNo).then(res => {
          const resdata = res.data
          this.$router.push({
            path: '/order/detail',
            query: {
              id: resdata.orderId,
              type: resdata.type
            }
          })
        }).catch(err => {
          // this.$message({
          //   message: err.message,
          //   type: 'error'
          // })
        })
      }
    }
  }
</script>

<style scoped>
  .main>section{
    padding: 24px;
    background: #fff;
  }
  .el-table__row td:hover { background-color: #000}
  .el-table td.green { background: #ebfff5!important;}
  .el-table th, .el-table tr {  background-color: #ffdfdf!important; }
</style>
